
<template>
<div>
  <div class="tags">
        <div class="tagsName">
            <Button class="pester" v-for="(ite,index) in tags" :value="ite.id" :key="ite.id" :class="{'tagclass':ite.isactive,active: currentIndex === index}"  @click="changeTag(ite,index)">{{ite.name}}</Button>
          </div>
        <div class="moreBut">
          <Button @click="changeMore" v-if="tagsList.length>20" v-show="tagsShow">加载更多</Button>
        </div>
  </div>
  <div class="all"  v-show="vuewaterfall">
    <div class="content">
      <vue-waterfall-easy  ref="waterfall" :imgsArr="imgsArr" @scrollReachBottom="_getimgList"  :reachBottomDistance="40" @click="clickFn"  @imgError="imgErrorFn" :maxCols="6">
        <div class="img-info" slot-scope="props">
          <div class="imageClub" >
                <div class="cardInfo" >
                  <div class="imageurl" @mouseover="changemodal(props.value)" @mouseout="changeout(props.value)" @click="changeClick(props.value,props.index)"  >
                    <img :src= props.value.path  class="canvasImg"  />
                    <div v-show="props.value.show" class="showstyle">
                      <span class="showtype">{{props.value.extension}}</span>
                    </div>
                    <div class="baseimg">
                      <a target="_self" href="javascript:;" :thislink='props.value.linkUrl'><img :src="props.value.path"  class="jsImg"  /></a>
                    </div>
                  </div>
                  <div class="cardButton">
                      <span style="padding-top:10px">{{props.value.width}}*{{props.value.height}}</span>
                      <span style="padding-top:10px"><Icon type="ios-eye-outline" />{{props.value.click}}</span>
                      <div>
                        <Select v-model="props.value.linkUrl" style="width:80px"  >
                            <Option v-for="(it,idx) in props.value.selectList" :key="idx" :value="it.value" >{{it.label}}</Option>
                        </Select>
                      </div>

                  </div>
                  <div class="cardsmall">
                    <Button size="small" @click="changedel(props.value)" v-hasC="{name: '-v1-material-img-img-del',flag: '/v1/material/img/img-del'}">删除</Button>
                    <Button size="small" @click="changetype(props.value)" v-hasC="{name: '-v1-material-img-cates-change',flag: '/v1/material/img/cates-change'}">变更类别</Button>
                    <Button size="small" @click="changeImg(props.value)" v-hasC="{name: '-v1-material-img-img-change',flag: '/v1/material/img/img-change'}">图片替换</Button>
                  </div>
                  <div class="boxFotter">
                    <span>标签：</span>
                    <Input v-model="props.value.remarks" placeholder="请输入标签" style="width: 165px"  @on-blur="changeMark(props.value)"/>
                  </div>
                </div>
          </div>
        </div>
      </vue-waterfall-easy>
    </div>
  </div>
   <div class="fixbox"></div>
    <!-- <Modal title="复制图片" v-model="imgVisible">
        <img :src="viewingImg" v-if="imgVisible" style="width: 100%">
    </Modal> -->
  <!-- <div v-if="imgsArr.length==0" class="resdata">
      <span>暂无数据</span>
  </div> -->
      <!-- 更改图片类型 -->
    <Modal v-model="modalstatus" title="更改当前图类别" width="500">
        <Form :ref='modalForm' :model='modalForm' :rules="rules">
            <FormItem >
              <Select v-model="modalForm.tagIds" style="width:400px" placeholder="请选择上传类别" filterable multiple>
                <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
        </Form>
        <div slot='footer' class="footer">
            <!-- <Button @click='canceledit(modalForm)'>取消</Button> -->
            <Button  type='primary' :loading="subloading" @click='submitedit(modalForm)'>保存</Button>
      </div>
    </Modal>
    <!-- 图片替换 -->
    <Modal v-model="imgstatus" title="更改当前图片" width="450">
      <Upload
        ref='upload'
        :format="['jpg','png','gif']"
        :action="requestAction"
        :headers="{'Authorization': 'Bearer ' + token,'projectid':project}"
        :on-progress="onprogress"
        :on-success="(res) => upSuccess(res)"

        :show-upload-list="false"
        type="drag"
        >
        <div style="padding: 20px 0" v-if="!imgurl">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击上传图片</p>
        </div>
        <div v-else>
          <img :src="imgurl" width="100%" height="350px">
        </div>
      </Upload>
      <div slot='footer' class="footer">
            <!-- <Button @click='canceledit(modalForm)'>取消</Button> -->
          <Button  type='primary' :loading="imageing" @click='saveImg'>确定</Button>
      </div>
    </Modal>
</div>
</template>
 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
    import vueWaterfallEasy from 'vue-waterfall-easy'
    import { getimgList, imgdel, getimgtype, materialtype, imageChage, tagsAdd, getclickAdd, getObjectURL } from '@/api/myuplod.js'
     import Setting from '@/setting';
    import util from '@/libs/util';

    export default {
        name: 'app',
          props: {
            remark: String
        },
          components: {
            vueWaterfallEasy
            // Button
        },
        data () {
            return {
                imgsArr: [],
                page: 0, // 当前加载的加载图片的次数
                pullDownDistance: 0,
                pageSize: 50,
                 project: util.storage.get('currentProject'),
                token: util.cookies.get('token'),
                baseUrl: Setting.apiBaseURL,
                requestAction: '',
                imgurl: '',
                imgList: [],
                value: '',
                typeList: [],
                tagsList: [],
                modalstatus: false,
                tags: [],
                modalForm: {
                    tagIds: []
                },
                rules: {
                    tagIds: [{ required: true, message: '请选择更改的类别', trigger: 'change' }]
                },
                subloading: false,
                imgstatus: false,
                imageing: false,
                id: '',
                imgPath: '',
                tag_id: '', // tags搜索
                link: '',
                page: 1,
                currentIndex: 0,
                show:false,
                total:0,
                isbuay:false,
                tagsShow:true,
                vuewaterfall:true,
                imgVisible:false,
                linkUrl:'',
                viewingImg:'',
            }
        },
        beforeDestroy(){
           let img = document.getElementsByClassName("jsImg")
           img.remove()
        },
         mounted () {
            this.requestAction = this.baseUrl + `/v1/material/upload/imgs-upload`;},
        created () {
          //  this.inits()

            // 删除某个卡片
            // setTimeout(()=>{
            //   this.imgsArr.splice(1,1)
            // },2000)
        },
        methods: {
          inits(){
            this.page=1;
            this.tagsList= [],
            this.imgsArr=[]
            this._getimgList()
            this._gettype()
          },
            // 鼠标移动效果
            changemodal (item) {
                item.show = true
            },
            changeout (item) {
                item.show = false
            },
                   // 获取类别
            _gettype () {
                materialtype({}).then(res => {
                    this.typeList = res;
                    this.tagsList = res.map(item => ({
                        ...item, isactive: false
                    }));
                    this.tagsList.unshift({
                        id: '',
                        name: '所有'
                    })
                    this.tags = this.tagsList.slice(0, 20);
                }).catch(() => {
                    // this.tableLoading = false
                })
            },
            changeMore () {
                this.tags = this.tagsList
                this.tagsShow=false
            },
                // tabs切换
            changeTag (ite, index) {
                ite.isactive = !ite.isactive
                ite.showtive = !ite.showtive
                this.currentIndex = index;
                this.tag_id = ite.id
                this.page=1
                this.imgsArr=[]
                this.vuewaterfall=false
                this._getimgList()
            },
            // 打标签
            changeMark (item) {
                let params = {
                    id: item.id,
                    remark: item.remarks
                }
                tagsAdd(params).then(res => {
                    this.$Message.success('标记成功');
                    // this._getimgList()
                }).catch(() => {

                })
            },
            changeClick (item, index) {
                getclickAdd({ id: item.id }).then(res => {
                    // this.$Message.success('标记成功');
                }).catch(() => {

                })
                let img = document.getElementsByClassName("jsImg")[index];
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNode(img);
                selection.removeAllRanges();
                selection.addRange(range);
                document.execCommand('copy');
                if(document.execCommand('copy')){
                  // this.$Message.success('当前图片已复制成功')
                    this.$Notice.success({
                    title: '温馨提示：',
                    desc: '复制当前图片已成功'
                  });
                }
            },
            // 获取列表数据
            _getimgList () {
                let params = {
                    tag_id: this.tag_id,
                    remark: this.remark,
                    page: this.page
                }
                this.vuewaterfall=true
                this.show = true
                getimgList(params).then(res => {
                    let list = res.list.map(item => ({
                        ...item,
                        show: false,
                        // remarks: '',
                        selectList: [
                            {
                                value: '/swt/',
                                label: '快商通'
                            },
                            {
                                value: '/tell/',
                                label: '电话'
                            },
                            {
                                value: 'javascript:;',
                                label: '其他'
                            }
                        ]
                    }));
                    this.total = res.total
                    this.imgsArr = this.imgsArr.concat(list)
                    if (this.page * this.pageSize >= this.total) { // 模拟已经无新数据，显示 slot="waterfall-over"
                        this.$refs.waterfall.waterfallOver()
                      return

                    }
                     this.page++

                    // this.imgList = this.page === 1 ? list : [...this.imgList, ...list]

                    this.show = false
                    // console.log(this.imgList, 'imglist数据')
                }).catch(() => {
                    // this.tableLoading = false
                })
            },
            clickFn (event, { index, value }) {
                // event.preventDefault()
                if (event.target.tagName.toLowerCase() == 'img') {
                    // console.log('img clicked', index, value)
                }
            },
            imgErrorFn (imgItem) {
                // console.log('图片加载错误', imgItem)
            },
            changeImgArr () {
                axios.get('./static/mock/data-change.json') // 真实环境中，后端会根据参数group返回新的图片数组，这里我用一个静态json文件模拟
                    .then(res => {
                        this.imgsArr = res.data
                    })
            },
            pullDownMove (pullDownDistance) {
                // console.log('pullDownDistance', pullDownDistance)
                this.pullDownDistance = pullDownDistance
            },
            pullDownEnd (pullDownDistance) {
                console.log('pullDownEnd')
                if (this.pullDownDistance > 50) {
                    alert('下拉刷新')
                }
                this.pullDownDistance = 0
            },
               // 删除图片
        changedel (item) {
            this.$Modal.confirm({
                title: '确定将当前图片删除移入回收站？',
                // content: '<p>Content of dialog</p><p>Content of dialog</p>',
                onOk: () => {
                    imgdel({ id: item.id }).then(res => {
                        this.$Message.info('删除成功');
                        this._getimgList()
                    }).catch(() => {
                        // this.$Message.error('删除失败')
                    })
                },
                onCancel: () => {
                    // this.$Message.error('')
                }
            })
        },
        changetype (item) {
        this.$set(this.modalForm, 'id', item.id)
        this.modalstatus = true
        this.modalForm.tagIds = []
        },
        // 类别确定
        submitedit (modalForm) {
            this.$refs[modalForm].validate((valid) => {
                if (valid) {
                    this.subloading = true;
                    let params = {
                        id: this.modalForm.id,
                        tagIds: this.modalForm.tagIds.join(',')
                    }
                    getimgtype(params).then(res => {
                        this.$Message.success('更改成功');
                        this.modalstatus = false;
                        this.subloading = false;
                        this._getimgList()
                    }).catch(() => {
                        this.modalstatus = false;
                        this.subloading = false;
                    })
                } else {
                    // this.$Message.error('请完善表格。');
                }
            })
        },
          // 图片更换
        changeImg (item) {
            this.id = item.id
            this.imgstatus = true
            this.imgurl = ''
            this.imgPath = ''
        },
        onprogress () {
            //
        },
        upSuccess (response) {
            let url = response.data.map(item => item.img_url)
            this.imgPath = url
            this.imgurl = `${this.baseUrl}/library_image_tmp${url}`
        },
        saveImg () {
            if (this.imgurl) {
                this.imageing = true;
                let params = {
                    id: this.id,
                    imgPath: this.imgPath.join('')
                }
                imageChage(params).then(res => {
                    this.$Message.success('更改成功');
                    this.imgstatus = false;
                    this.imageing = false;
                    this._getimgList()
                }).catch(() => {
                    this.imgstatus = false;
                    this.imageing = false;
                })
            } else {
                this.$Message.error('请选择图片')
            }
        },
        },

    }
</script>

<style >
* {
  margin: 0;
  padding: 0;
}
a {
  color: #515a6e;
  text-decoration: none;

}
a::active {
     color: #515a6e;
  }
html,
body,
.all {
  /* height: 100%;
  overflow: auto; */
  position: relative;

}
.content {
    /* position: absolute;
    top: 32px;
    bottom: 0; */
    width: 100%;
    height: 500px;
  }
.some-info {
    line-height: 1.6;
    text-align: center;
 }
.imageClub{
  /* position: relative; */
  /* width: 280px; */
   /* padding: 10px 0 0 20px; */
  /* display: flex; */
}
.cardInfo{
    padding: 15px;
  }
.imageurl{
    width: 100%;
    /* background: rgb(99, 188, 223); */
    height:250px;
    position: relative;
  }
  .canvasImg{
    width: 100%;
    height:100%;
    object-fit: contain;
  }
  .cardButton{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
  }
  .cardsmall{
    display: flex;
     justify-content: space-between;
     padding: 6px 0;
  }
  .img-info{
     /* width: 280px; */
    /* margin-right: 10px; */
  }
  .showstyle{
    width: 100%;
    /* height: 100%; */
    position: absolute;
    background: #000;
    left: 0;
    top: 0;
    opacity: .5;
  }
  .showtype{
    position: absolute;
    right:10px;
    top:10px;
    padding: 0px 20px;
    border-radius: 5px;
    background: #515a6e;
    font-size: 16px;
    color: #fff;
  }
  .vue-waterfall-easy-container .vue-waterfall-easy {
    position: relative;
  }
  a:hover{
    color: #515a6e;
  }
.over{
 top: 500px!important;
}
.tags{
  /* padding:10px 0; */
  border-left:0.5px solid #ccc;
  border-right:0.5px solid #ccc;
  box-shadow: 0px 1px 4px #999;
}
.tagsName{
  padding:10px;
}
.active {
  background: #515a6e !important; ;
  color: #fff !important;
  border-color: #515a6e !important;
 }
/deep/.ivu-btn:active{
    color: #fff;
    background-color: #515a6e;
    border-color: #515a6e;
   background:#515a6e
 }
.showclass{
   background:none ;
  /* color:#000; */
}
.pester{
 margin:5px;
}
.moreBut{
  text-align: center;
  padding: 0 0 10px 0;
  }
.fixbox{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index:-88;
  top:0;
  left: 0;
  background: #f5f7f9;
}
.baseimg{
  position: fixed;
  z-index:-888;
  overflow: hidden;
  opacity: 0;
}
.jsLoad{
  width: 100%;
}
</style>
